<div class="coveraka slide_in">
  <div class="left_gate"></div>
  <div class="right_gate"></div>

<p><a href="#"><font color="white">Album Siswa</font></a></p>

</div>
<div class="coveraka slide_in">
  <div class="left_gate"></div>
  <div class="right_gate"></div>

<p><a href="#"><font color="white">Koleksi Mutiara Cinta</font></a></p>

</div>
<div class="coveraka slide_in">
  <div class="left_gate"></div>
  <div class="right_gate"></div>

<p><a href="#"><font color="white">Koleksi Mutiara Motivasi</font></a></p>

</div>
<div class="coveraka slide_in">
  <div class="left_gate"></div>
  <div class="right_gate"></div>
<p><a href="#"><font color="white">Koleksi Peribahasa</font></a></p>

<style> 
.coveraka {
position: relative;
width: 300px;
height: 30px;
margin: 20px auto;
background-color: #eee;
z-index: 1;
 
-webkit-box-shadow: 0 2px 10px rgba(0,0,0,0.3);
-mox-box-shadow: 0 2px 10px rgba(0,0,0,0.3);
box-shadow: 0 2px 10px rgba(0,0,0,0.3);
}
.coveraka p {color:black;
text-align:center;
margin: 0;
}
.left_gate {
position: absolute;
background: green;
bottom: 0; right: 50%; left: 0; top: 0;
 
-webkit-transition: all 0.5s ease-out;
-moz-transition: all 0.5s ease-out;
-ms-transition: all 0.5s ease-out;
-o-transition:all 0.5s ease-out;
transition: all 0.5s ease-out;
}
.coveraka:hover .left_gate {
right: 100%; left: -50%;
}
.right_gate {
position:absolute;
background:green;
bottom: 0;
left: 50%;
right:0;top:0;
 
-webkit-transition: all 0.5s ease-out;
-moz-transition: all 0.5s ease-out;
-ms-transition: all 0.5s ease-out;
-o-transition: all 0.5s ease-out;
transition: all 0.5s ease-out;
}
.coveraka:hover .right_gate {
left: 100%; right: -50%;
}
.slide_in {
overflow:hidden;
}
.slide_in .left_gate {
background: #0C5CA3;
}
.slide_in .right_gate {
background: #41B5F0;
} 
</style>